<template>
  <div class="box">
    <div v-show="isData">
      <div v-if="details && details.articletitle" class="title_box">{{details.articletitle}}
      </div>
      <div class="nav_box">
        <div class="nav_box_lf">
          <img class="nav_box_lf_type" src="/static/img/Oval 2@2x.png" alt="">
          <div class="nav_box_lf_txt">
            <div v-if="details.type && details.type.type" class="nav_box_lf_txt_t overflowEllipsis">
              {{details.type.type}}</div>
            <div v-if="details && details.createdate" class="nav_box_lf_txt_time overflowEllipsis">
              {{details.createdate
              | baseDateFun}}
            </div>
          </div>
        </div>
        <div v-if="details && details.volume" class="nav_box_lr overflowEllipsis">
          阅读{{details.volume
          | baseVolumeFun}}
        </div>
      </div>
      <div v-if="details && details.articlecontent" class="bd_box" v-html="details.articlecontent"></div>
    </div>
    <div v-show="!isData">
      <div class="isDataImg">
        <img src="/static/img/图案@2x.png" alt="">
      </div>
      <div class="isDataTxt">咦，该文章不翼而飞~~~</div>
    </div>
  </div>
</template>
<script>
import {
  GetApiwebtraingetgetH5Detail,
  getwxshare
} from "../../requestApi/integral";
import { Toast } from "mint-ui";
export default {
  components: {},
  data() {
    return {
      details: {},
      isData: true
    };
  },
  created: function() {},
  mounted() {
    if (this.$route.query.id) {
      this.listFun();
      this.isData = true;
    } else {
      this.isData = false;
    }
  },
  methods: {
    async listFun() {
      let self = this;
      let params = {
        id: this.$route.query.id
      };
      let res = await GetApiwebtraingetgetH5Detail(params);
      if (res.statusCode == 200) {
        if (res.data) {
          self.details = res.data;
          document.title = self.details.articletitle || "";
          self.wxFun();
          this.isData = true;
        } else {
          this.isData = false;
        }
      } else {
        this.isData = false;
        Toast({
          message: res.statusMessage,
          position: "bottom"
        });
      }
    },
    async wxFun() {
      let self = this;
      let res = await getwxshare({
        url: encodeURIComponent(location.href.split("#")[0])
      });
      if (res.statusCode == 200) {
        if (res.data) {
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: "wx458059036e2d68f2", // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.noncestr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名，见附录1
            jsApiList: [
              "checkJsApi",
              "updateAppMessageShareData",
              "onMenuShareAppMessage",
              "onMenuShareTimeline",
              "updateTimelineShareData"
            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          });

          wx.ready(function() {
            //朋友圈
            wx.updateTimelineShareData({
              title: document.title, // 分享标题
              desc: "更多精彩，下载忠青APP查看", // 分享描述
              link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl:
                "http://mvpfile.vv.cc/utiming/1554711728144a0cc278308b64f0b9ffbe35b2d06b226.png", // 分享图标
              success: function() {
                // 设置成功
              },
              complete: function() {
                // 设置成功
              }
            });
            wx.onMenuShareAppMessage({
              title: document.title, // 分享标题
              desc: "更多精彩，下载忠青APP查看", // 分享描述
              link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl:
                "http://mvpfile.vv.cc/utiming/1554711728144a0cc278308b64f0b9ffbe35b2d06b226.png", // 分享图标
              success: function() {
                // 用户确认分享后执行的回调函数
                console.log("设置成功");
              },
              success: function() {
                // 用户点击了分享后执行的回调函数
              }
            });
            // //朋友
            // wx.updateAppMessageShareData({
            //   title: document.title, // 分享标题
            //   desc: '更多精彩，下载忠青APP查看', // 分享描述
            //   link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            //   imgUrl: 'http://mvpfile.vv.cc/utiming/1554711728144a0cc278308b64f0b9ffbe35b2d06b226.png', // 分享图标
            //   success: function () {
            //     // 用户确认分享后执行的回调函数

            //   },
            //   cancel: function () {
            //     // 用户取消分享后执行的回调函数

            //   },
            //   complete: function () {
            //     // 设置成功

            //   }
            // })
          });
        }
      } else {
        this.isData = false;
        Toast({
          message: res.statusMessage,
          position: "bottom"
        });
      }
    }
  },
  filters: {},
  watch: {},
  computed: {}
};
</script>
<style scoped>
.isDataTxt {
  width: 100vw;
  text-align: center;
  margin-top: 0.1333rem;
  height: 0.5333rem;
  font-size: 0.3733rem;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  line-height: 0.5333rem;
}

.isDataImg {
  width: 100vw;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3.3333rem;
}

.isDataImg img {
  width: 5.8933rem;
  height: 2.4rem;
  display: block;
}

.bd_box {
  margin-top: 0.5333rem;
  width: 100%;
}

.nav_box_lr {
  height: 0.8533rem;
  width: 2.1333rem;
  font-size: 0.32rem;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(156, 158, 163, 1);
  line-height: 1.12rem;
  overflow: hidden;
  text-align: right;
}

.nav_box_lf {
  display: flex;
}

.nav_box_lf_txt_time {
  height: 0.4533rem;
  font-size: 0.32rem;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(156, 158, 163, 1);
  line-height: 0.4533rem;
  width: 100%;
}

.nav_box_lf_txt_t {
  height: 0.4533rem;
  font-size: 0.32rem;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(72, 74, 77, 1);
  line-height: 0.4533rem;
  width: 100%;
}

.nav_box_lf_txt {
  height: 0.9067rem;
  width: calc(100vw - 0.8533rem - 0.8533rem - 0.2667rem - 2.6667rem);
  margin-left: 0.2667rem;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}

.nav_box_lf_type {
  width: 0.8533rem;
  height: 0.8533rem;
}

.nav_box {
  height: 0.9067rem;
  width: 100%;
  margin-top: 10.9987px;
  display: flex;
  justify-content: space-between;
}

.title_box {
  width: 100%;
  min-height: 0.7467rem;
  font-size: 0.5333rem;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: rgba(72, 74, 77, 1);
  line-height: 0.7467rem;
  margin-top: 0.6667rem;
}

.box {
  background: #fff;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  padding-left: 0.4267rem;
  padding-right: 0.4267rem;
}
</style>
